<template>
  <div style="margin-bottom:0.5rem; margin-top:0.88rem;" class="old_even">
    
    <div style="margin:0 8px; overflow:hidden;">
       <div class="res_wrap" ref="old_movie">

        <div class="resin" v-for="(item,index) in person" :key="index">
        <div class="resin_head">
          <img src="../assets/qwe.jpg" alt />
          <!-- <img :src="item.img"> -->
        </div>
        <div class="resin_main">
          <div>
            <span class="text">{{item.nm}}</span>
            <img v-if="item.version" src="../assets/zxc.png" />
            <!-- 请求数据时记得加判断 这张图片是否有 -->
          </div>
          <p>观众评:{{item.sc}}</p>
          <p>主演:{{item.star}}</p>
          <p>{{item.showInfo}}</p>
        </div>
        <div class="btn">
          <span>购票</span>
        </div>
      </div>
     </div>
    </div>

  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  data() {
    return {
      person:[],
      
    }
  },
  created(){

    var that = this;
    that.$http.get('api/movieOnInfoList?cityId=10').then( (res) => {
      
      if(res.data.msg == 'ok'){
        that.person = res.data.data.movieList;
        console.log(that.person);

       that.$nextTick( () => {
        // var movielist = new BScroll(that.$refs.old_movie)
        
        this.$nextTick(() => {
          if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.old_movie, {})
        console.log(this.scroll)
          }
      })

       })

      }

    }).catch( (error) => {
      console.log(error);
    })

  }
};
</script>

<style scoped>

.res_wrap{
  margin:0 var(--space);
}

.old_even{
  overflow: hidden;
}

.resin {
  display: flex;
  padding: 0.1rem 0;
}

.resin .resin_head img {
  height: 0.9rem;
}

.resin .resin_main {
  flex: 1;
  padding: 0.08rem;
   position: relative;
}

.resin .resin_main div{
  width: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resin_main div .text {
  font-size: 0.18rem;
  font-weight: bold;
}

.resin_main div img {
  position: absolute;
  right:0.08rem;

}

.resin .resin_main p {
  padding: 0.03rem 0;
  box-sizing: border-box;
  color: #666;
}

.resin_main p:nth-of-type(2) {
  width: 2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resin .btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
.resin .btn span {
  background: rgb(229, 72, 71);
  padding: 0.08rem;
  border-radius: 0.05rem;
  color: white;
}

.hr{
    height:0.01rem;
    background: rgb(247,247,247);
    margin:0 var(--space);
}
</style>